<html>

<head>
	<style>
		.dome {
	width: 300px;
	height: 300px;
	border: 1px solid #f00;
	position: relative;
}
		#toggle {
				display:none;
			}
			#toggle~.open {
				width: 30px;
				height: 30px;
				line-height: 30px;
				background-color:chocolate;
				text-align: center;
				position:absolute;
				bottom: 0;
				right: 0;
				z-index: 9;
transition:.5s;

			}
			#toggle~.close {
				width: 150px;
				height: 200px;
				line-height: 30px;
				background-color:darkolivegreen;
				text-align: center;
				position:absolute;
				bottom: 0;
				right: -150px;
				color: #fff;
transition:.5s;
			}

#toggle:checked~.open {
right: -30px;
			}

#toggle:checked~.close {
right: 0;
			}
		</style>
</head>

<body>
	<div class="dome" id="dome">
		<input type="checkbox" id="toggle">
		<div class="open">
			<label for="toggle">
				O
			</label>
		</div>
		<div class="close">
			<label for="toggle">
				X
			</label>
			关闭以后你看到的
		</div>
	</div>
	<button onclick="hide()">溢出隐藏</button>
	<button onclick="show()">溢出显示</button>
	<script>
		function hide() {
			document.getElementById('dome').style.overflow = "hidden";
		}

		function show() {
			document.getElementById('dome').style.overflow = "visible";
		}

	</script>
</body>

</html>
